<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>分享家</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/css/mui.css"/>
    <link rel="stylesheet" href="../css/util.css">
    <script src="http://at.alicdn.com/t/font_371407_7omis3wrfr7tx1or.js"></script>
</head>
<link rel="stylesheet" href="../css/indent.css">
<link rel="stylesheet" href="../css/index.css">
<body>
<header class="fxj-header">
    <h1 class="fxj-title">订单</h1>
</header>

<main id="main">
    <div class="tab-bar">
        <span :class="{active:!view.end}" @click="toggleEnd(false)">进行中</span>
        <span :class="{active:view.end}" @click="toggleEnd(true)">已结束</span>
    </div>

    <div class="tabs">
        <div id="underway" v-show="!view.end" v-cloak>
            <ul class="indent-group">
                <li class="indent-item" v-for="indent of data.going">
                    <div class="indent-title">
                        <span class="title" v-cloak>{{indent.title}}</span>
                        <span class="highlight" v-cloak>{{indent.status.value}}</span>
                    </div>
                    <i class="tieku"></i>
                    <div class="indent-info" @click="checkIndentDetail(indent.oid)">
                        <img :src="indent.img" alt="">
                        <div>
                            <span v-cloak>{{indent.start_date.slice(0,-3)}}至{{indent.end_date.slice(0,-3)}}</span>
                            <span v-cloak>整套出租 - 入住{{indent.guest_count}}人</span>
                            <span v-cloak>订单总额：<span class="highlight">￥{{indent.pay_price}}</span></span>
                        </div>
                        <svg class="icon">
                            <use xlink:href="#icon-you"></use>
                        </svg>
                    </div>
                    <i class="tieku"></i>
                    <div class="btn-group">
                        <span v-if="indent.status.status===4" v-cloak @click="earlyLeave(indent.oid)">提前退房</span>
                        <span v-if="indent.status.status!==4" @click="cancelIndent(indent.oid)">取消订单</span>
                        <span @click="contactTheLandlord(indent)">联系房东</span>
                        <span v-cloak v-if="indent.status.status===2||indent.status.status===22" class="highlight"
                              @click="nowPay(indent)">立即付款</span>
                    </div>
                </li>
            </ul>
        </div>

        <div id="end" v-show="view.end" v-cloak>
            <ul class="indent-group">
                <li class="indent-item" v-for="indent of data.end">
                    <div class="indent-title">
                        <span class="title" v-cloak>{{indent.title}}</span>
                        <span class="highlight" v-cloak>{{indent.status.value}}</span>
                    </div>
                    <i class="tieku"></i>
                    <div class="indent-info" @click="checkIndentDetail(indent.oid)">
                        <img :src="indent.img" alt="">
                        <div>
                            <span v-cloak>{{indent.start_date.slice(0,-3)}}至{{indent.end_date.slice(0,-3)}}</span>
                            <span v-cloak>整套出租 - 入住{{indent.guest_count}}人</span>
                            <span v-cloak>订单总额：<span class="highlight">￥{{indent.pay_price}}</span></span>
                        </div>
                        <svg class="icon">
                            <use xlink:href="#icon-you"></use>
                        </svg>
                    </div>
                    <i class="tieku"></i>
                    <div class="btn-group">
                        <!--<span @click="delIndent(indent.oid)" v-if="indent.status.status===0">删除订单</span>-->
                        <span v-cloak class="highlight" v-if="indent.status.status===5||indent.status.status===7" @click="goPage('comment.html',{
                            data:{
                                id:indent.oid
                            }
                        })">立即点评</span>
                        <span v-cloak class="highlight" v-if="indent.status.status===6||indent.status.status===7||indent.status.status===8" @click="goPage('comment_detail.html',{
                            data:{
                                id:indent.oid,
                                type:'2'
                            }
                        })">查看点评</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="loadMore"></div>
</main>
<nav id="tab-nav">
    <a onclick="openF('../index.html',1)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-find-o"></use>
        </svg>
        <span class="tab-label">发现</span>
    </a>
    <a onclick="openF('./indent.html',2)">
        <svg class="icon active" aria-hidden="true">
            <use xlink:href="#icon-order"></use>
        </svg>
        <span class="tab-label active">订单</span>
    </a>
    <a onclick="openF('./msg.html',3)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-message-o"></use>
        </svg>
        <span class="tab-label">消息</span>
    </a>
    <a onclick="openF('./me.html',4)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-user-o"></use>
        </svg>
        <span class="tab-label">我</span>
    </a>
</nav>

<script type="text/javascript" src="../lib/js/babel-polyfill.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<script type="text/javascript" src="../lib/js/mui.js"></script>
<script type="text/javascript" src="../lib/js/jquery.js"></script>
<script type="text/javascript" src="../script/util.js"></script>

<script src="../script/indent.js"></script>
</body>
</html>
